html.dark {
    --timeline-bg-color: #222222;
    --sidebar-bg-color: #333333;
    --sidebar-text-color: #fff;
    --titlebar-hover-color: #303030;
    --response-bg-color: #1c1b1b;
    --list-item-hover-color: #303030;
    --list-item-selected-color: #3B3B3B;
    --split-color: #262626;
    --collapse-border-color: #424242;

    .el-divider__text {
        background-color: #1E1E1E;
    }

    .el-tag.el-tag--critical {
        background-color: #2F141A;
        border-color: #411F23;
        color: #CF364C;
    }

    .el-tabs--card > .el-tabs__header .el-tabs__item.is-active {
        border-bottom-color: #1D1E1F;
    }

    .el-result:hover {
        cursor: pointer;
        background-color: #3c3c3c;
    }

    .note-info {
        border-left-color: #3498db;
        background: #1B222B; /* 深蓝色背景 */
    }
    
    .note-warning {
        border-left-color: #f39c12;
        background: #8a6d3b; /* 暗黄色背景 */
    }
    
    .note-error {
        border-left-color: #e74c3c;
        background: #a94442; /* 暗红色背景 */
    }
    
    .note-success {
        border-left-color: #2ecc71;
        background: #2d865c; /* 深绿色背景 */
    }

    /*!
        Theme: StackOverflow Dark
        Description: Dark theme as used on stackoverflow.com
        Author: stackoverflow.com
        Maintainer: @Hirse
        Website: https://github.com/StackExchange/Stacks
        License: MIT
        Updated: 2021-05-15
      
        Updated for @stackoverflow/stacks v0.64.0
        Code Blocks: /blob/v0.64.0/lib/css/components/_stacks-code-blocks.less
        Colors: /blob/v0.64.0/lib/css/exports/_stacks-constants-colors.less
      */
    .hljs {
        /* var(--highlight-color) */
        color: #ffffff;
        /* var(--highlight-bg) */
        background: #1c1b1b
    }

    .hljs-subst {
        /* var(--highlight-color) */
        color: #ffffff
    }

    .hljs-comment {
        /* var(--highlight-comment) */
        color: #999999
    }

    .hljs-keyword,
    .hljs-selector-tag,
    .hljs-meta .hljs-keyword,
    .hljs-doctag,
    .hljs-section {
        /* var(--highlight-keyword) */
        color: #88aece
    }

    .hljs-attr {
        /* var(--highlight-attribute); */
        color: #88aece
    }

    .hljs-attribute {
        /* var(--highlight-symbol) */
        color: #c59bc1
    }

    .hljs-name,
    .hljs-type,
    .hljs-number,
    .hljs-selector-id,
    .hljs-quote,
    .hljs-template-tag {
        /* var(--highlight-namespace) */
        color: #f08d49
    }

    .hljs-selector-class {
        /* var(--highlight-keyword) */
        color: #88aece
    }

    .hljs-string,
    .hljs-regexp,
    .hljs-symbol,
    .hljs-variable,
    .hljs-template-variable,
    .hljs-link,
    .hljs-selector-attr {
        /* var(--highlight-variable) */
        color: #b5bd68
    }

    .hljs-meta,
    .hljs-selector-pseudo {
        /* var(--highlight-keyword) */
        color: #88aece
    }

    .hljs-built_in,
    .hljs-title,
    .hljs-literal {
        /* var(--highlight-literal) */
        color: #f08d49
    }

    .hljs-bullet,
    .hljs-code {
        /* var(--highlight-punctuation) */
        color: #cccccc
    }

    .hljs-meta .hljs-string {
        /* var(--highlight-variable) */
        color: #b5bd68
    }

    .hljs-deletion {
        /* var(--highlight-deletion) */
        color: #de7176
    }

    .hljs-addition {
        /* var(--highlight-addition) */
        color: #76c490
    }

    .hljs-emphasis {
        font-style: italic
    }

    .hljs-strong {
        font-weight: bold
    }

    .hljs-formula,
    .hljs-operator,
    .hljs-params,
    .hljs-property,
    .hljs-punctuation,
    .hljs-tag {
        /* purposely ignored */

    }
}